<!--
  功能：
  作者：parker
  邮箱：geekpark@icloud.com
  微信：wzb10746
  时间：2023年08月21日 20:23:31
  版本：
  文件: src/components/popup/leftMenu.vue
-->
<template>
  <u-popup
    :show="showMenu"
    mode="left"
    closeOnClickOverlay
    overlayOpacity="0.6"
    customStyle="width: 500rpx"
    safeAreaInsetTop
    @close="close"
    @open="open"
  >
    <!-- 菜单列表 -->
    <view class="menuWrap">
      <view v-for="(block, i) in menuList" :key="i" class="menu-block">
        <view v-for="item in block" :key="item.id" class="menu-item u-flex u-flex-y-center">
          <i :class="[item.icon, 'menu-item-icon']"></i>
          <span class="menu-item-name">{{ item.name }}</span>
        </view>
      </view>

       <!-- 菜单footer -->
    <view class="u-flex u-flex-between menu-footer">
      <view class="menu-footer-item u-flex u-flex-y u-flex-center" v-for="item in menuSettings" :key="item.id">
          <view class="menu-footer-icon"><i :class="item.icon"/></view>
          <span class="menu-footer-label">{{ item.label }}</span>
      </view>
    </view>
    </view>
    
   
  </u-popup>
</template>
<script setup>
import {
  ref,
  getCurrentInstance,
  onBeforeMount,
  reactive,
  toRefs,
  computed,
  nextTick,
  defineProps,
  defineComponent,
  defineExpose,
} from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useTimeoutFn } from "@vueuse/core";
// const props = defineProps({
//     showMenu:{
//         type: String,
//         default: false
//     }
// })

const menuList = ref([
  [
    {
      icon: "ri-user-add-line",
      name: "发现好友",
      id: 1,
    },
  ],
  [
    {
      icon: "ri-lightbulb-flash-line",
      name: "创作中心",
      id: 2,
    },
    {
      icon: "ri-quill-pen-line",
      name: "我的草稿",
      id: 3,
    },
    {
      icon: "ri-history-line",
      name: "浏览记录",
      id: 4,
    },
  ],
  [
    {
      icon: "ri-file-list-2-line",
      name: "订单",
      id: 5,
    },
    {
      icon: "ri-shopping-cart-line",
      name: "购物车",
      id: 6,
    },
    {
      icon: "ri-wallet-line",
      name: "钱包",
      id: 7,
    },
  ],
  [
    {
      icon: "ri-book-open-line",
      name: "社区公约",
      id: 8,
    },
  ],
]);

const menuSettings = [
  {
    id: 1,
    icon: "ri-settings-6-line",
    label: "设置",
  },
  {
    id: 2,
    icon: "ri-customer-service-2-line",
    label: "帮助与客服",
  },
  {
    id: 3,
    icon: "ri-qr-scan-line",
    label: "扫一扫",
  },
];

const showMenu = ref(false);

const close = (cb, delay = 200) => {
  showMenu.value = false;
  const { isPending, start, stop } = useTimeoutFn(() => {
    cb && cb();
  }, delay);

  console.log("leftMemu close");
};

// cb 打开后回调
const open = (cb, delay = 200) => {
  showMenu.value = true;
  const { isPending, start, stop } = useTimeoutFn(() => {
    cb && cb();
  }, delay);
  console.log("leftMemu open");
};

// 对外暴露方法
defineExpose({
  open(cb, delay) {
    open(cb, delay);
  },
  close(cb, delay) {
    close(cb, delay);
  },
});

onLoad(async () => {
  const { proxy } = getCurrentInstance();
});

defineComponent({
  name: "LeftMenu",
});
</script>

<style lang='scss' scoped>
.menuWrap {
  padding: 60rpx 30rpx;
  height: 100%;
  position: relative;
}
.menu {
  &-block {
    border-bottom: 1px solid #f5f5f5;
    &:last-child {
      border-bottom: none;
    }
  }
  &-item {
    padding: 24rpx 0;
    flex-direction: row;
    &-icon{
      font-size: 38rpx;
    }
    &-name {
      font-size: 12px;
      font-weight: 500;
      margin-left: 20rpx;
      color: #333
    }
  }


  &-footer{
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 30rpx;
    flex-direction: row;
    &-item{
      width: 33.3%;
      display: flex;
      text-align: center;
    }
    &-icon{
      width: 70rpx;
      height: 70rpx;
      background-color: #f5f5f5;
      border-radius: 300rpx;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 14rpx;
    }
    &-label{
      font-size: 12px;
      color: #666
    }
  }
}

</style>

<!--
文件版权号：92f9539b-e989-4124-9261-9238ab79bea7
-->
